.max-result {
  width: 170px;
}

.pagination-block {
  .q-field--dense .q-field__control,
  .q-field--dense .q-field__marginal {
    height: 30px !important;
  }

  .select-pagination {
    position: relative;
  }
}

.search-list {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;

  .chart {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  }

  .my-sticky-header-table {
    .q-table__top,
    .q-table__bottom,
    thead tr:first-child th {
      /* bg color is important for th; just specify one */
      background-color: white;
    }

    thead tr th {
      position: sticky;
      z-index: 1;
    }

    thead tr:first-child th {
      top: 0;
    }

    /* this is when the loading indicator appears */
    &.q-table--loading thead tr:last-child th {
      /* height of all previous header rows */
      top: 48px;
    }
  }

  .q-table__top {
    padding-left: 0;
    padding-top: 0;
  }

  .q-table thead tr,
  .q-table tbody td,
  .q-table th,
  .q-table td {
    height: 25px;
    padding: 0px 5px;
    font-size: 0.75rem;
  }

  .q-table__bottom {
    width: 100%;
  }

  .q-table__bottom {
    min-height: 32px;
    max-height: 32px;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .q-td {
    overflow: hidden;
    min-width: 100px;

    .expanded {
      margin: 0;
      white-space: pre-wrap;
      word-wrap: break-word;
      word-break: break-all;
    }
  }

  .highlight {
    background-color: rgb(255, 213, 0);
  }

  .table-header {
    // text-transform: capitalize;

    .table-head-chip {
      background-color: #f5f5f5;
      padding: 0px;

      .header-col-title {
        margin-right: 0.5rem;
        font-size: 14px;
        color: $dark;
      }

      .close-icon {
        &:hover {
          opacity: 0.7;
        }
      }

      .q-table th.sortable {
        cursor: pointer;
        text-transform: capitalize;
        font-weight: bold;
      }
    }

    &.isClosable {
      padding-right: 30px;
      position: relative;

      .q-table-col-close {
        transform: translateX(26px);
        position: absolute;
        margin-top: 2px;
        color: #808080;
      }
    }

    .q-table th.sortable {
      cursor: pointer;
      text-transform: capitalize;
      font-weight: bold;
    }
  }
}
.thead-sticky tr > *,
.tfoot-sticky tr > * {
  position: sticky;
  opacity: 1;
  z-index: 1;
  background: #f5f5f5;
}

.q-table--dark .thead-sticky tr > *,
.q-table--dark .tfoot-sticky tr > * {
  background: #565656;
}

.q-table--dark .table-header {
  // text-transform: capitalize;

  .table-head-chip {
    background-color: #565656;
  }
}

.thead-sticky tr:last-child > * {
  top: 0;
}

.tfoot-sticky tr:first-child > * {
  bottom: 0;
}

.field_list,
.table-head-chip {
  padding: 0px;
  margin-bottom: 0;
  position: relative;
  overflow: visible;
  cursor: default;
  font-size: 12px;
  font-family: monospace;

  .field_overlay {
    width: fit-content;
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
    background-color: #ffffff;
    border-radius: 6px;
    padding: 0 6px;
    visibility: hidden;
    display: flex;
    align-items: center;
    transition: all 0.3s linear;
    pointer-events: none;

    &.field_overlay_dark {
      background-color: #181a1b;
    }

    .q-icon,
    .q-toggle__inner {
      cursor: pointer;
      opacity: 0;
      transition: all 0.3s linear;
      margin: 0 1px;
      pointer-events: auto;
    }
  }

  &:hover {
    .field_overlay {
      visibility: visible;

      .q-icon,
      .q-toggle__inner {
        opacity: 1;
      }
    }
  }
}

.table-head-chip {
  font-family: "Nunito Sans", sans-serif;

  .field_overlay {
    background-color: #f5f5f5;
    pointer-events: none;

    &.field_overlay_dark {
      background-color: #565656;
    }

    .q-icon {
      pointer-events: auto;
    }
  }
}

.logs-analyzed-input{
  width: 80%;

  :deep(.q-field){
    max-width: 10rem !important;
    width: 10rem !important;
  }

  :deep(.q-field__native){
    font-size: 1.5rem !important;
    color: var(--q-primary);
    font-weight: bold;
    outline: none !important;
    border: none !important;
    padding: 0 !important;
  }

  :deep(.q-field__control){
    height: fit-content !important;
    padding: 0 !important;
    &::before, &::after{
      outline: none !important;
      border: none !important;
    }
  }
}

// Pattern block actions - show on hover
.pattern-block-actions {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.q-card:hover .pattern-block-actions {
  opacity: 1;
}